import React from 'react'
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom'
import { RouteLayout, ListPage } from 'weaver-mobile-page'
import { Tools } from 'weaver-mobile';
import { toJS } from 'mobx';
import './../../../style/nextNodeOperator.less'
import $  from 'jquery';
const ButtonGroup = RouteLayout.ButtonGroup;
const Item = ListPage.Item;
const Normal = ListPage.Normal;
const getLabel = Tools.getLabel;
const template = {
    default: [
        {
            key: 'col1',
            configs: [
                {
                    key: 'col1_row1',
                    configs: [
                        { key: 'nodeName' },
                    ],
                },
                {
                    key: 'col1_row2',
                    configs: [
                        { key: 'operatorsstr' },
                    ],
                },
            ],
        },
    ],
};
@inject('wfNextNodeOperator')
@withRouter
@observer
export default class SelectNextNode extends React.Component {
    componentDidMount() {
      this.adjustHeight();
    }
    componentDidUpdata() {
      this.adjustHeight();
    }
    adjustHeight = () => {
        const { nodeAttribute } = this.props.wfNextNodeOperator;
        if(nodeAttribute == '1') {
            $('.wf-selecNextNode .wm-list-page-modal').css({height: 'calc(100% - 65px)'});
        } else {
            $('.wf-selecNextNode .wm-list-page-modal').css({height: 'calc(100% - 35px)'});
        }
    }
    render() {
        const { nodeInfo, list, nodeAttribute } = this.props.wfNextNodeOperator;
        return (
            <div className='wf-selecNextNode'>
                <div className="wf-form-nextNodeOperator-title"><span>{getLabel(500276,"请选择下一节点")}</span></div>
                <Normal
                    showCheck
                    multipleCheck={nodeAttribute == '1'}
                    template={template}
                    store={list}
                    needCheckAll={true}
                    onRowClick={(arg) => {
                        let selectIds = [];
                        list.selectedRowKeys.map(key => {
                            selectIds.push(key);
                        })
                        if(selectIds.indexOf(arg.id) != -1) {//取消选中
                            selectIds = selectIds.filter(v => v != arg.id);
                        } else {//选中
                            if(nodeAttribute == '1') {//分叉起始点可以多选
                                if(selectIds.indexOf(arg.id) == -1) {
                                    selectIds.push(arg.id);
                                } else {
                                    selectIds.delete(arg.id);
                                }
                            } else {//其他节点单选
                                selectIds = [arg.id];
                            }
                        }
                        list.setState({ selectedRowKeys: selectIds })
                    }}
                />
            </div>
        )
    }


}